// Geometry for the tree view

#directories {
    position:absolute;
    top:0;
    left:0%;
    width:100%;
    bottom:0;
    overflow-y: auto;
    outline: none;
    transition:0.3s left ease;

    &.hidden { left:-100%; }

    // Direct descendants need some margin to the files and to other roots
    /*& > ul:not(:first-child) {
        padding-top:@ribbon-height/2;
        padding-bottom:@ribbon-height/2;
    }*/

    #directories-dirs-header, #directories-files-header {
      height: @ribbon-height;
      vertical-align: bottom;
      margin-top: @ribbon-height/2;

      &:before {
          font-family: @font-icon;
          font-size: @font-size-small * 0.8;
          margin:0px 5px;
          display:inline-block;
          line-height:@ribbon-height;
      }
    }

    #directories-dirs-header:before { content: '\f0f0'; }
    #directories-files-header:before { content: '\f0d6'; }

    ul {
        list-style-type: none;
        margin-left:0px;
        padding-left:0px;

        li {
            line-height: @ribbon-height;
            padding:@ribbon-padding;
            white-space: nowrap;
            padding-left:5px;
            margin:5px 0px;
            overflow: hidden;
        }

        .collapse-indicator {
            margin-right:3px;

            &::before {
                content: "\f48b";
                font-family: @font-icon;
                font-size: @font-size-small * 0.6; /* Bit smaller, those indicators are damned huge */
                display:inline-block;
                vertical-align: middle;
                width:10px;
                line-height:@ribbon-height;
                overflow:hidden;
            }
        }

        &.collapsed .collapse-indicator::before {
            content: "\f488";
        }

        &.collapsed ul {
            height:0px;
            display:none;
        }
    }

    .file {
        line-height: @ribbon-height;
        padding:@ribbon-padding;
        white-space: nowrap;
        padding-left:5px;
        margin:5px 0px;
        overflow: hidden;
    }

    .virtual-directory:before {
        content: '\f4ea';
        font-family: @font-icon;
        font-size: @font-size-small; /* Bit smaller, those indicators are damned huge */
        margin-right:5px;
        display:inline-block;
        position:relative;
    }

    .project:before {
        content: '\f6af';
        font-family: @font-icon;
        font-size: @font-size-small; /* Bit smaller, those indicators are damned huge */
        margin-right:5px;
        vertical-align: bottom;
        display:inline-block;
        position:relative;
    }

    .emptyPaths {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;

        .info {
            display: block;
            padding: 10px;
            margin-top: 50%;
            font-weight: bold;
            font-size: 200%;
        }
    }
}
